<template>
    <div class="applyWrap">
        <a-spin :spinning="loading">
            <div class="fixedBox" v-if="status >= 0 && status != 3">
                <template>
                    <div class="fixedBox-head">
                        <span>{{ title }}</span>
                        <div class="subtitle">
                            <div>数据分析系统需要授权才能进入，数据分析系统权限范围</div>
                            <div>1.智隼系统钉钉专员</div>
                            <div>2.科队长及以上管理人员(需要申请)</div>
                            <div>联系人电话：18274956474</div>
                        </div>
                    </div>
                    <div class="fixedBox-content">
                        <template v-if="status == 0 || isRest">
                            <a-form class="fixedBox-content-form" :form="form" :colon="false" layout="horizontal"
                                :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                <a-form-item label="申请人" class="fixedBox-content-form-item">
                                    <a-input size="large" placeholder="请输入申请人"
                                        v-decorator="['applyName', { rules: [{ required: true, message: '请输入申请人' }] }]"
                                        style="width: 100%;">
                                    </a-input>
                                </a-form-item>
                                <a-form-item label="手机号" class="fixedBox-content-form-item">
                                    <a-input size="large" placeholder="请输入手机号" v-decorator="['applyPhone', {
                                        rules: [{ required: true, message: '请输入手机号' }, {
                                            pattern: /^1[3-9]\d{9}$/,
                                            message: '请输入正确的手机号',
                                            trigger: 'blur'
                                        }]
                                    }]">
                                    </a-input>
                                </a-form-item>
                                <a-form-item label="公司及职务" class="fixedBox-content-form-item">
                                    <a-input size="large" placeholder="请输入公司及职务"
                                        v-decorator="['position', { rules: [{ required: true, message: '请输入公司及职务' }] }]"
                                        style="width: 100%;">
                                    </a-input>
                                </a-form-item>
                                <a-form-item label="申请原因" class="fixedBox-content-form-item">
                                    <a-textarea :auto-size="{ minRows: 4, maxRows: 4, }" placeholder="请输入申请原因"
                                        v-decorator="['applyMemo', { rules: [{ required: true, message: '请输入申请原因' }] }]" />
                                </a-form-item>
                            </a-form>
                        </template>
                        <template v-else>
                            <a-result :status="resultStatus" :title="contentInfo">
                            </a-result>
                        </template>
                    </div>
                    <div class="fixedBox-footer">
                        <a-space>
                            <template v-if="status == 0 || isRest">
                                <a-button :loading="submitLoading" :block="true" size="large" type="primary"
                                    @click="handSubmit">提交申请</a-button>
                            </template>
                            <template v-else-if="status == 2">
                                <a-space>
                                    <a-button :loading="submitLoading" :block="true" size="large" type="primary"
                                        @click="handRest">重新提交申请</a-button>
                                </a-space>
                            </template>
                            <template v-if="[2, 1].includes(status)">
                                <showModalTable type="apply"></showModalTable>
                            </template>
                            <template>
                                <a-button @click="handBack" size="large">大屏数据</a-button>
                            </template>
                        </a-space>
                    </div>
                </template>
            </div>
        </a-spin>
    </div>
</template>
<script>
import showModalTable from '@/components/ZSTable/components/showModalTable.vue';

export default {
    name: 'apply',
    components: {
        showModalTable,
    },
    data() {
        return {
            loading: false,
            submitLoading: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            status: '-1',// 0-未申请未入驻 1-已申请未入驻 2-已申请被拒绝 3-入驻正常
            styleObj: {
                0: '未申请未入驻',
                1: '已申请未入驻',
                2: '已申请被拒绝',
                3: '入驻正常',
            },
            isRest: false,
            info: '',
        }
    },
    methods: {
        handSubmit() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.submitLoading = true;
                    this.postAxios(this.$fillInfo, values).then((res) => {
                        if (res.code == 200) {
                            this.isRest = false;
                            this.$message.success('操作成功')
                            this.getInfo();
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(() => {
                    }).finally(() => {
                        this.submitLoading = false;
                        setTimeout(() => {
                            this.form.resetFields();
                        }, 1000);
                    })
                }
            });
        },
        getInfo() {
            // 测试数据
            // {
            //     this.status = 0;
            //     return
            // }
            this.info = '';
            this.loading = true;
            this.getAxios(this.$applyStatus, {}).then((res) => {
                if (res.code == 200) {
                    let status = res.data.status
                    this.status = Number(status);
                    if (status == 3) {
                        this.$message.success(this.styleObj[status])
                        this.$router.replace({ path: "/manage" });
                    } else if (status == 2) {
                        this.info = res.data.message;
                    }
                }
            }).catch(() => {
            }).finally(() => {
                this.loading = false;
            })
        },
        // 重新提交申请
        handRest() {
            this.isRest = true;
        },
        handBack() {
            this.$router.replace({ path: "/screen" });
        }
    },
    computed: {
        title() {
            let res = '';
            let status = Number(this.status);
            switch (status) {
                case 0:
                    res = '请填写申请信息';
                    break;
                case 1:
                case 2:
                case 3:
                    res = '申请状态';
                    break;
            }
            if (this.isRest) {
                res = '请填写申请信息';
            }
            return res;
        },
        contentInfo() {
            let res = '';
            switch (this.status) {
                case 1:
                    res = '审核中，请稍后'
                    break;
                case 2:
                    res = this.info || '请求已被拒绝'
                    break;
            }
            return res;
        },
        resultStatus() {
            let res;
            switch (this.status) {
                case 1:
                    res = 'info';
                    break;
                case 2:
                    res = 'error';
                    break
            }
            return res;
        }
    },
    mounted() {
        this.getInfo();
    }
}
</script>
<style lang="less" scoped>
.applyWrap {
    background: url("~@/assets/images/gyhlw-bg.png") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .fixedBox {
        margin-top: -150px;
        height: 550px;
        width: 400px;
        padding: 0px 24px;
        background-color: #ffffff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        &-head {
            height: 160px;
            font-size: 24px;
            font-weight: 560;
            padding: 12px 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // margin-top: 12px;

            .subtitle {
                margin-top: 8px;
                font-size: 14px;
                font-weight: none;
                color: rgba(0, 0, 0, 0.5);
            }
        }

        &-content {
            height: 300px;

            &-form {
                &-item {
                    ::v-deep {
                        input {
                            border: none;
                            border-bottom: 1px solid #cdcdcd;
                        }
                    }
                }
            }
        }

        &-footer {
            margin-top: 0px;
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px 30%;
        }
    }
}
</style>